import React, { useState, useEffect } from 'react'
import { View, Image, Text, Input, Switch } from '@tarojs/components'
import Taro,{useRouter} from '@tarojs/taro'
import classNames from 'classnames'
import {network} from '@/utils/network'
import {ButtonEle} from '@/components/Buttton'
import {Icon} from '@/components/Icon'

import './index.scss'

function Index(props){
  const router=useRouter()
  const [name,setName]=useState<string>()
  const [mobile,setMobile]=useState<string>()
  const [address_description,setDescription]=useState<string>()
  const [address,setAddress]=useState<any>()
  const [gender,setGender]=useState<number>(1)
  const [isDefault,setIsDefault]=useState<number>(0)

  useEffect(()=>{
    if(router.params.id){
        network.get(`/xxm/address/${router.params.id}`).then((res)=>{
          setName(res.data.name)
          setGender(res.data.gender)
          setMobile(res.data.mobile)
          setDescription(res.data.address_description)
          setIsDefault(res.data.is_default)
          setAddress({
            name:res.data.name,
            address:res.data.address_detail,
            latitude:res.data.lat,
            longitude:res.data.lng
          })
        })
    }
    console.log(Taro.getCurrentPages())
  },[])
  const submit=()=>{
      let params:any={}
      params.name=name;
      params.mobile=mobile;
      params.address_description=address_description;
      params.is_default=isDefault;
      params.gender=gender;
      params.address_name=address?.name;
      params.address_detail=address?.address;
      params.lat=address?.latitude;
      params.lng=address?.longitude;
      if(router.params.id){
        network.put('/xxm/address', { ...params, id: Number(router.params.id)}).then(()=>{
          Taro.showToast({
            icon:'success',
            title:'保存成功',
            duration:2000
          })
          setTimeout(()=>{
            Taro.navigateBack({})
          },2000)
      })
      }else{
        network.post('/xxm/wx/address',params).then(()=>{
          Taro.showToast({
            icon:'success',
            title:'保存成功',
            duration:2000
          })
          setTimeout(()=>{
            Taro.navigateBack({})
          },2000)
      })
      }
  }
  const deleteAddress=()=>{
      Taro.showModal({
        title:'系统提示',
        content:'确认删除该地址？',
        success:(res)=>{
          if(res.confirm){
            network.del(`/xxm/address/${router.params.id}`).then(()=>{
              Taro.showToast({
                icon:'success',
                title:'删除成功',
                duration:2000
              })
              setTimeout(()=>{
                Taro.navigateBack({})
              },2000)
          })
          }
        }
      })
  }
  // const chooseLocation = () => {
  //   Taro.chooseLocation({
  //     success: (res) => {
  //       console.log(res)
  //       setAddress(res)
  //     }
  //   })
  // }
  return (
    <View className='xxm-address-detail'>
      <View className='card'>
        <View className='form-group'>
          <View className='label'>
            姓名：
          </View>
          <Input value={name}  placeholder='收货人姓名' className='input' onInput={(e)=>setName(e.detail.value)}>
          </Input>
        </View>
        <View className='form-group'>
          <View className='label'>
            性别：
          </View>
          <View className='right gender'>
           <View onClick={()=>setGender(1)} className={classNames(['sex',gender===1&&'active'])}>
             男士
           </View>
           <View onClick={()=>setGender(0)} className={classNames(['sex',gender===0&&'active'])}>
             女士
           </View>
          </View>
        </View>
        <View className='form-group'>
          <View className='label'>
            手机号：
          </View>
          <Input type='number' value={mobile} placeholder='收货人手机号' className='input' onInput={(e)=>setMobile(e.detail.value)}>
          </Input>
        </View>
        {/* <View className='form-group' onClick={chooseLocation}>
          <View className='label'>
            地址：
          </View>
          <View className='right'>
            {address ? <View className='address'>
              <View className='name'>{address.name}</View>
              <View className='dis'>{address.address}</View>
            </View> : <View className='default'>
                点击选择
            </View>}
            <Icon customClass='icon' name='arrow-right' size={14}></Icon>
          </View>
        </View> */}
        <View className='form-group'>
          <View className='label'>
            详细地址：
          </View>
          <Input value={address_description} placeholder='单元楼、门牌号' className='input' onInput={(e)=>{setDescription(e.detail.value)}}>
          </Input>
        </View>
      </View>
      <View className='card'>
        <View className='form-group'>
          <View className='label lang'>
            设为默认收货地址
          </View>
          <View className='right'>
            <Switch className='switch' onChange={(e)=>{setIsDefault(e.detail.value?1:0)}} checked={isDefault===1} color='#F43443'></Switch>
          </View>
        </View>
      </View>
      <View className='btnContainer one'>
      <ButtonEle block type='primary' onClick={submit}>保存</ButtonEle>
      </View>
      {router.params.id&&
        <View className='btnContainer'>
        <ButtonEle block  onClick={deleteAddress}>删除</ButtonEle>
        </View>
      }


    </View>
  )
}
export default Index
